<template>
	<div style="height: 7vh;">
		<div class="indexTitle">
			<image class = "search" src="../imgs/5.png" @click="toSearch()"/>
			<div class="titlebuttons">
				<button class="titlebutton" :class="{active: activeBtn == '1'}" @click="toFollowing()">关注</button>
				<button class="titlebutton" :class="{active: activeBtn == '2'}" @click="toRecommend()">推荐</button>
			</div>
			<image class="camera" src=""/>
			<!-- ../imgs/照相机.png -->
			<div style="clear: both;"></div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'indexTitle',
	props:{
		activeBtn:String
	},
	methods: {
		toFollowing(){
			uni.reLaunch({	url:"/pages/index/index",	})
		},
		toRecommend(){
			uni.reLaunch({	url: '/pages/index/modules/recommend'	})
		},
		toSearch(){
			getApp().globalData.SearchClass = '1'
			uni.navigateTo({
				url: '/pages/ext/searchPage'
			}).catch((e) => {console.log(e)})
		}
	}
}
</script>

<style>
.titlebuttons{
	margin: 0px auto;
}
.titlebutton{
	background-color: transparent;
	padding: 0px;
	float: left;
	margin: 10px;
}
.titlebutton::after{
	border: none;
}
.search{
	width: 20px;
	height: 20px;
	margin-left: 5vw;
}
.indexTitle{
	background-color: transparent;
	display: flex;
	height: 7vh;
	align-items: center;
	padding: 5px 0px;
	position: fixed;
	width: 100vw;
	z-index: 999;
}
.camera{
	width: 20px;
	height: 20px;
	float: right;
	margin-right: 5vw;
}
.active{
	font-weight: 700;
}
</style>